<template>
  <d2-container>
    <div>
      <d2-crud
          ref="brand"
          :columns="columns"
          :data="brandData"
          add-title="新增品牌"
          edit-title="修改品牌信息"
          :form-options="formOptions"
          :add-template="addTemplate"
          :edit-template="editTemplate"
          selection-row
          @row-add="handleRowAdd"
          @dialog-cancel="handleDialogCancel"
          @row-edit="handleRowEdit"
          @selection-change="handleSelectionChange"
          :add-rules="addRules"
          :rowHandle="rowHandle"
          :options="options">
        <el-button slot="header" style="margin-bottom: 5px" @click="addBrand">新增</el-button>
        <el-button slot="header" type="danger" style="margin-bottom: 5px" @click="delBrand">删除</el-button>
      </d2-crud>
      <el-dialog title="删除提示：" :visible.sync="dialogFormVisible">
        <el-row :gutter="20">
          <el-col :span="2">
            <d2-icon style="color: red;font-size: 1.5em" name="warning"/>
          </el-col>
          <el-col :span="16">
            <span style="color:red;font-size: 1.5em" width="">删除品牌时，将会删除该品牌下所有型号的设备，请慎重操作！</span>
          </el-col>
        </el-row>
        <el-form :model="delForm"
                 style="margin-top: 2em;"
                 ref="delForm"
                 :rules="delFormRules">
          <el-form-item label="请输入 'DELETE' 确认删除：" prop="message" :label-width="formLabelWidth">
            <el-col :span="8">
              <el-input v-model="delForm.message" autocomplete="off"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitDelBrand">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </d2-container>
</template>

<script>
import { request } from '@/api/service'
import globalAPI from '@/api/globalAPI'

export default {
  data () {
    return {
      columns: [
        {
          title: '名字',
          key: 'name',
          width: '180'
        },
        {
          title: '备注',
          key: 'desc'
        }
      ],
      brandData: [],
      options: {
        stripe: true,
        height: '50em'
      },
      addTemplate: {
        name: {
          title: '名字',
          component: {
            span: 12
          }
        }
      },
      editTemplate: {
        name: {
          title: '名字',
          component: {
            span: 12
          }
        }
      },
      formOptions: {
        labelWidth: '80px',
        labelPosition: 'left',
        saveLoading: false
      },
      rowHandle: {
        edit: {
          icon: 'el-icon-edit',
          text: '点我进行编辑',
          size: 'small',
          show (index, row) {
            return row.showEditButton
          },
          disabled (index, row) {
            return row.forbidEdit
          }
        }
      },
      addRules: {
        name: [{ required: true, message: '请输入品牌名字', trigger: 'blur' },
          { min: 2, max: 200, message: '长度在 2 到 200个字符', trigger: 'blur' },
          { type: 'string', required: true, pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,200}$/, message: '由汉字数字字母下划线组成', trigger: 'blur' }]
      },
      delFormRules: {
        message: [
          { required: true, message: '请输入 DELETE', trigger: 'blur' },
          {
            validator (rule, value, callback) {
              if (value === 'DELETE') {
                callback()
              } else {
                callback(new Error('请输入正确信息'))
              }
            },
            trigger: 'blur'
          }
        ]
      },
      deleteData: [],
      delForm: {
        message: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '25%'
    }
  },
  methods: {
    handleDialogOpen ({ mode }) {
      this.$message({
        message: '打开模态框，模式为：' + mode,
        type: 'success'
      })
    },
    // 普通的新增
    addBrand () {
      this.$refs.brand.showDialog({
        mode: 'add'
      })
    },
    handleRowAdd (row, done) {
      this.formOptions.saveLoading = true
      request({
        url: `${globalAPI.BASE_URL}/stb/brand/v1`,
        method: 'put',
        data: row
      }).then(ret => {
        if (ret.statusCode === 2000) {
          this.$message({
            message: ret.msg,
            type: 'success'
          })
          this.findAll()
          this.formOptions.saveLoading = false
          done()
        } else {
          this.$message({
            message: ret.msg,
            type: 'fail'
          })
          this.formOptions.saveLoading = false
        }
      })
    },
    handleRowEdit ({ index, row }, done) {
      this.formOptions.saveLoading = true
      var data = this.brandData[index]
      data.name = row.name
      request({
        url: `${globalAPI.BASE_URL}/stb/brand/v1`,
        method: 'post',
        data: data
      }).then(ret => {
        if (ret.statusCode === 2000) {
          this.$message({
            message: ret.msg,
            type: 'success'
          })
          this.findAll()
          this.formOptions.saveLoading = false
          done()
        } else {
          this.$message({
            message: ret.msg,
            type: 'fail'
          })
          this.formOptions.saveLoading = false
        }
      })
    },
    submitDelBrand () {
      this.$refs.delForm.validate((valid) => {
        if (valid) {
          request({
            url: `${globalAPI.BASE_URL}/stb/brands/v1`,
            method: 'delete',
            data: this.deleteData
          }).then(ret => {
            if (ret.statusCode === 2000) {
              this.$message({
                message: ret.msg,
                type: 'success'
              })
              this.findAll()
              this.dialogFormVisible = false
            } else {
              this.$message({
                message: ret.msg,
                type: 'fail'
              })
            }
          })
        }
      })
    },
    handleDialogCancel (done) {
      this.$message({
        message: '取消保存',
        type: 'warning'
      })
      done()
    },
    handleSelectionChange (selection) {
      this.deleteData = selection
      console.log(selection)
    },
    delBrand () {
      if (this.deleteData === null || this.deleteData === undefined || this.deleteData.length ===0){
        this.$message({
          message: '请选择需要删除的品牌',
          type: 'warning'
        })
      } else {
        this.dialogFormVisible = true
      }
    },
    findAll () {
      request({
        url: `${globalAPI.BASE_URL}/stb/brands/v1`,
        method: 'get'
      }).then(res => {
        if (res.statusCode === 2000) {
          this.brandData = res.data
          this.brandData.forEach(brand => {
            brand.forbidEdit = false
            brand.showEditButton = true
          })
        }
      })
    }
  },
  created () {
    this.findAll()
  }
}
</script>
